<template>
  <div class="excel_box">
    <div class="excel_input_box">
      <!-- 不填备注就隐藏input -->
      <input v-if="userAuth[routeName].authorityImport" id="excelFile" @click="click" type="file" @change="handleFileChange" ref="excelinputer" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />
      <label for="excelFile" :class="{label_img:true,disabled:!userAuth[routeName].authorityImport}" @click="labelClick"></label>
      <el-button size="mini" :disabled="!userAuth[routeName].authorityImport">Excel上传</el-button>
    </div>
    <el-button v-if="uploadStatus == 2" size="mini" type="primary" @click="save">保存</el-button>
  </div>
</template>

<script>
  // import axios from 'axios'
  import {uploadExcelCar, uploadExcelGoodsOut, uploadExcelGoodsIn, uploadExcelGoodsCheck, uploadExcelCheckCar} from '@/api/api'
  import {mapGetters} from 'vuex'
  export default {
    name: 'excelUpload',
    props: {
      value: {
        // 绑定默认的value prop
        default: undefined
      },
      /**
       * 类型 car staff carMaintenance goodsOut goodsIn goodsCheck carCheck
       */
      type: {
        type: String,
        default: 'car'
      },
    },
    data () {
      return {
        loading: false, // 是否正在上传
        file: '', // 文件
        uploadStatus: 1, // 1 未上传 2上传且验证通过 3上传且验证不通过
        formdata: null, // 文件对象
        routeName: this.$route.name, // 路由名称
      }
    },
    computed: {
      ...mapGetters(['userAuth']),
    },
    methods: {
      click() {console.log('inptClick')},
      labelClick(e) {
        console.log('labelClick')
      },
      async save() {
        if (this.uploadStatus == 2) {
          let res = await this.uploadExcel('Y')
          if (res.code == 0) {
            this.uploadStatus = 1
            this.clearInput()
            this.$message('上传成功')
          } else if (res.code == 10003) {
            
          } else {
            this.$notify({
              title: '提示',
              message: res.msg,
              duration: 0
            })
          }
        } else {
          this.$message('文件错误，请重新上传')
        }
      },
      async uploadExcel(mode = 'N') {
        let res
        if (this.type == 'car') {
          res = await uploadExcelCar(this.formdata, mode)
        } else if (this.type == 'goodsOut') {
          res = await uploadExcelGoodsOut(this.formdata, mode)
        } else if (this.type == 'goodsIn') {
          res = await uploadExcelGoodsIn(this.formdata, mode)
        } else if (this.type == 'goodsCheck') {
          res = await uploadExcelGoodsCheck(this.formdata, mode)
        } else if (this.type == 'carCheck') {
          res = await uploadExcelCheckCar(this.formdata, mode)
        }
        return res
      },
      async handleFileChange(e) {
        let res = await this.upload(e)
        if (res.code == 0) {
          this.uploadStatus = 2
        } else if (res.code == 10003) {
          this.$notify({
            title: '提示',
            message: res.msg,
            duration: 0,
            type: 'warning'
          })
          this.uploadStatus = 2
        } else {
          this.$notify({
            title: '错误',
            message: res.msg || '上传失败，请重新上传',
            duration: 0,
            type: 'error'
          })
          this.uploadStatus = 3
        }
      },
      async upload (e) {
        // let inputDom = this.$refs.imginputer
        // 获取文件数据
        console.log(e)
        this.file = e.target.files[0]
        let size = Math.floor(this.file.size / 1024 / 1024)
        // 文件大小
        // if (size > 2) {
        //   this.$message({message: '请选择小于2M的图片'})
        //   return false
        // }

        let formdata = new FormData()
        formdata.append('file', this.file, 'fileName')
        this.loading = true
        this.formdata = formdata
        let res = await this.uploadExcel()
        this.loading = false
        return res
      },
      /**
       * 清除input
       */
      clearInput() {
        setTimeout(() => {
          let inputDom = this.$refs.imginputer
          if (inputDom) {
            console.log(inputDom)
            console.log(typeof inputDom)
            if (inputDom.hasOwnProperty('files')) {
              inputDom.files.length = 0
            }
          }
        }, 50);
      },
    }
  }
</script>

<style lang="scss" scoped>
  .excel_box{
    position: relative;
    width: 155px;
    height: 28px;
    display: inline-block;
    line-height: 1;
    .excel_input_box {
      position: relative;
      display: inline-block;
      float: left;
      width: 85px;
      height: 28px;
      // border: 1px dashed #000000;
      // border-radius: 20px;
      overflow: hidden;
      img{
        width: 100%;
      }
    }
    input{
      position: absolute;
      left: -99999px;
    }
    .label_img{
      position: absolute;
      top: 0;left: 0;right: 0;bottom: 0;
      z-index: 10; /* 这个z-index之后说到*/
      cursor: pointer;
      &:hover+.el-button[disabled]{
        background: #fff;
      } 
      &.disabled{
        cursor: not-allowed;
      }
    }
    &>.el-button{
      float: left;
      margin-left: 10px;
      z-index: 11;
    }
  }
</style>